<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>管理员控制面板</title>
  <link rel="stylesheet" href="./css/admin_dashboard.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
  <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/xlsx@0.17.4/dist/xlsx.full.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
</head>

<body>
<div id="app">
    <el-container>
      <el-header style="height: 100px">
        <div style="display: flex; justify-content: space-between; align-items: center; padding-top: 20px">
          <span style="font-size: 18px; margin-left: 20px;">登录账户：{{ username }}    </span> 
          <span style="font-size: 35px; margin: 0 auto; font-weight: bold">零食管理系统</span>
          <a href="logout.php" style="font-size: 14px;">退出登录</a>
        </div>

      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu default-active="1" class="el-menu-vertical-demo">
            <el-menu-item index="1" @click="showInventory">
              <i class="el-icon-menu"></i>
              <span slot="title">零食库存信息</span>
            </el-menu-item>
            <el-menu-item index="2" @click="showAddStock">
              <i class="el-icon-setting"></i>
              <span slot="title">添加库存</span>
            </el-menu-item>
            <el-menu-item index="3" @click="showCheckrecord">
              <i class="el-icon-star-off"></i>
              <span slot="title">购买记录</span>
            </el-menu-item>
            <el-menu-item index="4" @click="showuserboard">
              <i class="el-icon-star-off"></i>
              <span slot="title">用户管理</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <el-container>
          <el-main style="background-image: url('./iamge/bgc2.jpg'); background-size: cover; background-position: center;">
          <div v-if="currentTab === 'inventory'">
            <div class = "login-container" style = "margin-top:0px;max-width:1000px">
                <h2>零食库存信息</h2>

                <el-row style="margin-bottom:15px">
                  <el-col :span="8" style="margin-right:10px;"><el-input placeholder="请输入内容" v-model="inputStr"
                      clearable>
                    </el-input></el-col>
                  <el-col :span="4"><el-button type="primary" icon="el-icon-edit"
                      @click="queryInventory">查询</el-button></el-col>
                  <el-col :span="4"><el-button type="primary" icon="el-icon-edit"
                      @click="exportToExcel">导出Excel</el-button></el-col>
                  <el-col :span="4"><el-button type="primary" icon="el-icon-edit"
                      @click="showDateDialog">查询账单</el-button></el-col>
                </el-row>

                 <!-- 日期选择对话框 -->
                <el-dialog :visible.sync="dateDialogVisible" title="选择时间段" :modal="false">
                  <el-date-picker v-model="dateRange" type="daterange" :picker-options="pickerOptions"></el-date-picker>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dateDialogVisible = false"> 取消 </el-button>
                    <el-button type="primary" @click="handleDateSelection"> 确定 </el-button>
                  </div>
                </el-dialog>

                <!-- bill查询结果对话框 -->
                <el-dialog :visible.sync="billresultDialogVisible" title="查询结果" width="60%" :modal="false">
                  <div v-if="bill">
                    <p> 时间范围为  {{ bill["startdate"] }} 到 {{ bill["enddate"] }} 的账单为： </p>
                    <p> 采购零食支出: {{ bill["total_snack_price"] }} 元 </p>
                    <p> 用户购买的收入: {{ bill["total_purchase"] }} 元 </p>
                  </div>
                  <el-button @click="billresultDialogVisible = false">关闭</el-button>
                </el-dialog>

                <el-table :data="snackInventory.slice((currentPage - 1) * pageSize, currentPage*pageSize)" style="width: 100%">
                <el-table-column label="ID" prop="snack_id"></el-table-column>
                <el-table-column label="时间" prop="date" :width="200"></el-table-column> <!-- 设置宽度为 150 像素 -->
                <el-table-column label="零食名称" prop="snack_name"></el-table-column>
                <el-table-column label="总量" prop="snack_quantity"></el-table-column>
                <el-table-column label="总价" prop="snack_price"></el-table-column>
                <el-table-column label="已售" prop="snack_sold"></el-table-column>
                <el-table-column label="单价" prop="unit_price"></el-table-column>
                <el-table-column label="实习成员单价" prop="unit_price0"></el-table-column>
                <el-table-column label="正式成员单价" prop="unit_price1"></el-table-column>
                <el-table-column label="编辑" :width="100">
                  <template slot-scope="scope">
                    <el-button type="primary" @click="changeItem(scope.row)">修改</el-button>
                  </template>
                </el-table-column>
              </el-table>
              </br>

              <!-- 零食信息编辑 -->
              <el-dialog title="编辑零食信息" :visible.sync="dialogVisible" :lock-scroll="false" @close="resetForm"
                  :size="'medium'" :modal="false">
                  <el-form :model="editForm" label-width="100px">
                    <el-form-item label="ID">
                      <el-input :value="editForm.snack_id" disabled />
                    </el-form-item>
                    <el-form-item label="时间">
                      <el-input :value="editForm.date" disabled />
                    </el-form-item>
                    <el-form-item label="名称">
                      <el-input :value="editForm.snack_name" disabled />
                    </el-form-item>
                    <el-form-item label="添加库存量">
                      <el-input v-model="editForm.add_quantity" />
                    </el-form-item>
                    <el-form-item label="单价">
                      <el-input v-model="editForm.unit_price" />
                    </el-form-item>
                  </el-form>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="updateItem">确认修改</el-button>
                  </span>
                </el-dialog>
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[6, 12, 18, 24]" :page-size="pageSize" background
                layout="prev, pager, next" :total="snackInventory.length">
              </el-pagination>
            </div>
          </div>

          <!-- 添加库存 -->
          <div v-else-if="currentTab === 'addStock'">
            <div class = "login-container" style = "margin-top:0">
              <h2>添加库存</h2>
              <div class="block"> </div>
              <form class="add-stock-form" @submit.prevent="addStock">
                <div style = "display:flex;flex-direction:row;margin-top:50px">
                    <label for="snack_name"style = "margin-top:10px;margin-left:230px;font-weight:bold;margin-right:10px">零食名称</label>
                    <el-input style = "width:50%" v-model="addStockForm.snack_name"placeholder="请输入添加的零食名称" required></el-input>
                </div>
                <div style = "display:flex;flex-direction:row;margin-top:50px;margin-bottom:50px">
                  <label for="snack_quantity" style = "margin-top:10px;margin-right:40px;margin-left:230px;font-weight:bold">数量</label>
                  <el-input-number v-model="addStockForm.snack_quantity" required></el-input-number>
                  <label for="snack_price"style = "margin-top:10px;margin-left:50px;font-weight:bold;margin-right:10px">进货价格</label>
                  <el-input-number v-model="addStockForm.snack_price" :step="0.5" required></el-input-number>
                </div>
                  <el-button type="primary" native-type="submit">添加库存</el-button>
              </form>
            </div>
          </div>

          <!-- 购买记录 -->
          <div v-else-if="currentTab === 'checkrecord'">
            <div class="login-container" style="margin-top: 0px; max-width: 1000px">
              <h2>零食购买记录</h2>
              <el-table key="tab01" :data="snackrecord.slice((currentPage2 - 1) * pageSize, currentPage2*pageSize2)" style="width: 100%">
                <el-table-column label="ID" prop="purchase_id"></el-table-column>
                <el-table-column label="时间" prop="time" :width="200"></el-table-column>
                <el-table-column label="用户名" prop="username"></el-table-column>
                <el-table-column label="零食名称" prop="snack_name"></el-table-column>
                <el-table-column label="数量" prop="quantity"></el-table-column>
                <el-table-column label="价格" prop="price"></el-table-column>
              </el-table>
              </br>

              <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
                :current-page="currentPage2" :page-sizes="[6, 12, 18, 24]" :page-size="pageSize2" background
                layout="prev, pager, next" :total="snackrecord.length">
              </el-pagination>
            </div>
          </div>

          <!-- 用户信息管理 -->
          <div v-else-if="currentTab === 'userboard'">
            <!-- 用户信息查看 -->
            <div class="login-container" style="margin-top: 0px; max-width: 1000px">
              <h2>用户信息管理</h2>
              <el-table key="tab02" :data="userrecord.slice((currentPage2 - 1) * pageSize, currentPage2*pageSize2)" style="width: 100%">
                <el-table-column label="ID" prop="user_id" width="130"></el-table-column>
                <el-table-column label="用户名" prop="username" width="170"></el-table-column>
                <el-table-column label="用户密码" prop="password" width="170"></el-table-column>
                <el-table-column label="身份" prop="role" :formatter="roleFormat" width="140"></el-table-column>
                <el-table-column label="成员类型" prop="member" :formatter="memberFormat" width="130"></el-table-column>

                <!-- 修改和删除按钮 -->
                <el-table-column label="操作" width="200" >
                  <template slot-scope="scope">
                    <div style="display: flex; flex-direction: row;">
                      <el-button type="primary" size="mini" @click="showmodifyUserCard(scope.row.user_id, scope.row.username, scope.row.password, scope.row.role, scope.row.member)">修改</el-button> <!-- (scope.row.user_id, scope.row.username, scope.row.password, scope.row.role, scope.row.member)">修改</el-button> -->
                      <el-button type="danger" size="mini" @click="deleteUser(scope.row.user_id, scope.row.username, scope.row.role, scope.row.member)">删除</el-button>
                    </div>
                  </template>
                </el-table-column>

                <!-- 修改按钮的弹窗 -->
                <el-dialog title='修改用户信息' :visible.sync="dialogVisible"  append-to-body width="50%" :close-on-click-modal="false" @close="closemanageuserCard()">
                  <el-form :model="modifyUserForm" ref="addUserForm" :inline="false" style="margin-left:20px" size="mini" label-width="110px" label-position="right">
                    <el-form-item label="用户id: " prop="modify_userid">
                      <el-input v-model="modifyUserForm.userid" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名: " prop="modify_username">
                      <el-input v-model="modifyUserForm.m_username" :disabled="isEdit || isView"></el-input>
                    </el-form-item>
                    <el-form-item label="用户密码：" prop="modify_password">
                      <el-input v-model="modifyUserForm.m_password" :disabled="isView"></el-input>
                    </el-form-item>
                    <el-form-item label="身份：" prop="modify_role">
                      <el-select v-model="modifyUserForm.m_role" :disabled="isView" placeholder="请选择身份" style="margin-left: 0px;">
                          <el-option label="管理员" value="1"></el-option>
                          <el-option label="普通成员" value="2"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="成员类型：" prop="modify_member">
                      <el-select v-model="modifyUserForm.m_member" :disabled="isView" placeholder="请选择成员类型" style="margin-left: 0px;">
                        <el-option label="实习成员" value="0"></el-option>
                        <el-option label="正式成员" value="1"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                  <span slot="footer" class="dialog-footer">
                    <el-button type="primary" size="mini" v-show="!isView" @click="submitmodifyUserForm(modifyUserForm.userid)">确 定</el-button>
                    <el-button type="info" size="mini" @click="dialogVisible = false">取消</el-button>
                  </span>
                </el-dialog>

              </el-table>
              </br>

              <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
              :current-page="currentPage2" :page-sizes="[6, 12, 18, 24]" :page-size="pageSize2" background
              layout="prev, pager, next" :total="userrecord.length">
              </el-pagination>
              </div>
            </br>

            <!-- 进行用户账号注册 -->
            <div class = "login-container" style = "margin-top:0">
              <h2>新用户注册</h2>
              <div class="block">
              </div>
              <form class="add-stock-form" @submit.prevent="addUser">
              <div style = "display:flex;flex-direction:row;margin-top:50px">
                  <label for="username"style = "margin-top:10px;margin-left:230px;font-weight:bold;margin-right:10px;">用户名</label>
                  <el-input style = "width:60%" v-model="addUserForm.username"placeholder="请输入注册的用户名" required></el-input>
              </div>
              <div style = "display:flex;flex-direction:row;margin-top:50px">
                <label for="password"style = "margin-top:10px;margin-left:230px;font-weight:bold;margin-right:10px">密  码</label>
                <el-input style = "width:60%" v-model="addUserForm.password"placeholder="请输入密码" required></el-input>
              </div>
              <div style="display: flex; flex-direction: row; margin-top: 20px; margin-bottom: 20px; align-items: center">
                <label for="role" style="margin-top: 5px; margin-right: 40px; margin-left: 230px; font-weight: bold; ">身份</label>
                <el-radio-group v-model="addUserForm.role" required>
                  <el-radio label="1">管理员</el-radio>
                  <el-radio label="2">普通用户</el-radio>
                </el-radio-group>
                <label for="member" style="margin-top: 5px; margin-left: 30px; font-weight: bold; margin-right: 10px;">成员类型</label>
                <el-radio-group v-model="addUserForm.member" :step="0.5" required>
                  <el-radio label="1">正式成员</el-radio>
                  <el-radio label="0">实习成员</el-radio>
                </el-radio-group>
              </div>
              <el-button type="primary" native-type="submit">注册新用户</el-button>
              </form>
            </div>
          </div>

          </el-main>
          <el-footer style="padding-top: 20px">版权归FPGA所有 | 2023/12/4</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
  <script src="./js/admin_dashboard.js"></script>
</body>
</html>